<template>
    <el-form :inline="true" :model="formData" class="demo-form-inline">

        <el-form-item>
            <el-date-picker style="width:210px" v-model="formData.dateRange" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" />

        </el-form-item>
        <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>
        <div>
            <baidu-map class="map" :center="center" :zoom="14" :scroll-wheel-zoom="true">
                <bml-heatmap :data="data" :max="max" :radius="20">
                </bml-heatmap>
            </baidu-map>

        </div>

</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import { trackApi } from "@/api/index"
import { BmlHeatmap } from 'vue-baidu-map-3x';
import * as dayjs from 'dayjs'
const max = ref(0)

const data = ref([]);
const formData = reactive({
    dateRange: [dayjs().add(-7, 'day').format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")]
})
const center = reactive({
    lng: 113.8044655468814,
    lat: 34.79234184396662
})

onMounted(() => {

    callTrackApi()
})
const onSubmit = () => {

    callTrackApi()
}
const callTrackApi = () => {


    let params = {}
    params.startDate = formData.dateRange[0]
    params.endDate = formData.dateRange[1] + " 23:59:59"

    trackApi.heatmap.call(params).then((res: any) => {

        res.sort((a, b) => b.count - a.count)

        let highest = res[0];

        center.lat = highest.lat
        center.lng = highest.lng

        max.value = highest.count

        data.value = res
    })
}


</script>

<style scoped>
.map {
    width: 100%;
    height: 400px;
}
</style>